<template>
    <CommonTitle title-name="项目基本信息"></CommonTitle>
    <!--    项目基本信息      -->
    <el-card class="card-box">
        <el-form :inline="true">
            <el-row>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="合同名称">
                        <el-input v-model="form.contractName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="项目名称">
                        <el-input v-model="form.projectName" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="合同编号">
                        <el-input v-model="form.contractId" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="任务来源">
                        <el-input v-model="form.meetingTitle" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="承租方(签约方信息)"></CommonTitle>
    <!--    承租方(签约方信息)      -->
    <el-card class="card-box">
        <el-form :inline="true">
            <el-row>
                <el-col :span="13">
                    <el-form-item class="el-form-item-width" label="承租方(签约方)名称">
                        <el-input :model-value="form.leaseCustomers && form.leaseCustomers.length !== 0
                            ? form.leaseCustomers[0].customerName
                            : '暂无'
                            " disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="9">
                    <el-form-item class="el-form-item-width" label="签约(竞选)方式">
                        <el-input :model-value="form.signType === 1 ? '新签' : '续签'" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="出租资产和房源信息"></CommonTitle>
    <!--    出租资产和房源信息      -->
    <el-card class="card-box">
        <el-form :inline="true">
            <el-form-item class="el-form-item-width" label="资产名称">
                <el-input v-model="form.assetsName" disabled />
            </el-form-item>
            <el-form-item class="el-form-item-width" label="资产位置">
                <el-input v-model="form.address" disabled />
            </el-form-item>
            <el-row>
                <el-col :span="9">
                    <el-form-item class="el-form-item-width" label="租赁面积">
                        <el-input v-model="form.leaseTotalArea" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="13">
                    <el-form-item class="el-form-item-width" label="房源明细">
                        <el-input :model-value="form.leaseHousings && form.leaseHousings.length !== 0
                            ? form.leaseHousings[0].housingNumber : ''
                            " disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="租赁周期">
                        <el-input :model-value="form.signStartTime + '-' + form.signEndTime" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="租赁用途">
                        <el-input v-model="form.purpose" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="费用信息"></CommonTitle>
    <!--    出租资产和房源信息      -->
    <el-card class="card-box">
        <el-form label-position="left" label-width="100px">
            <el-row>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="我方收款账号">
                        <el-input :model-value="form.payeeAccount || ''" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="3"></el-col>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="开户行">
                        <el-input :model-value="form.payeeBank || ''" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="3"></el-col>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="保证金(元)">
                        <el-input v-model="form.deposit" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="合同金额">
                        <el-input v-model="form.contractTotalPrice" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="3"></el-col>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="应收款总金额">
                        <el-input v-model="form.receivableTotalPrice" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="3"></el-col>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="装修优惠期">
                        <el-input v-model="form.freeRentMonth" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="租金递增模式">
                        <el-input v-model="form.increaseStartYear" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="3"></el-col>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="递增比例">
                        <el-input v-model="form.increaseRate" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="3"></el-col>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="支付方式">
                        <el-input :model-value="['', '月度', '季度', '半年', '年'][form.payType]" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table class="m-t10" :data="form.leaseRentPlans" :header-cell-style="{ background: '#EDEDED' }" border
            style="width: 100%">
            <el-table-column prop="numberOfPeriods" label="期数"></el-table-column>
            <el-table-column prop="payStartTime" label="期间">
                <template #default="scope">
                    <span>{{
                        scope.row.payStartTime + "-" + scope.row.payEndTime
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="increaseRatio" label="递增(%)" />
            <el-table-column prop="rentUnitPrice" label="租金单价(元/㎡/月)" />
            <el-table-column v-if="form.payType === 1" prop="receivableRent" label="月度租金(元)" />
            <el-table-column v-if="form.payType === 2" prop="receivableRent" label="季度租金(元)" />
            <el-table-column v-if="form.payType === 3" prop="receivableRent" label="半年租金(元)" />
            <el-table-column v-if="form.payType === 4" prop="receivableRent" label="年底租金(元)" />
        </el-table>
    </el-card>

    <CommonTitle class="m-t30" title-name="协议经办方信息"></CommonTitle>
    <el-card class="card-box">
        <el-form>
            <el-row>
                <el-col class="d-flex a-center" :span="3">
                    <el-form-item class="m-b0" label="经办人">
                        <span>{{ form.manageUserName || "暂无" }}</span>
                    </el-form-item>
                </el-col>
                <el-col class="d-flex a-center" :span="3">
                    <el-form-item class="m-b0" label="部门">
                        <span>{{ form.departmentName }}</span>
                    </el-form-item>
                </el-col>
                <el-col class="d-flex a-center" :span="3">
                    <el-button class="m-l10" @click="previewContract">预览合同</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" :titleName="'附件'"></CommonTitle>
    <div class="fileVoList m-l20 m-b10" v-if="form.fileVoList && form.fileVoList.length !== 0">
        <div class="fileItem" v-for="(item, index) in form.fileVoList" :key="index" @click="onDownload(item)">
            <span class="fileItem-font">{{ item.fileName }}</span>
        </div>
    </div>
    <el-empty v-else description="暂无数据" />
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {
    ElCard,
    ElRow,
    ElCol,
    ElForm,
    ElFormItem,
    ElTable,
    ElTableColumn,
    ElEmpty
} from "element-plus";
import { contractApi } from "@/api/coordination";
import { reactive, ref, onMounted } from "vue";
import { downloadFile, downloadImage, localGet } from "@/common/utils/GlobalUtils";

const contractId = ref("");

const form = reactive({});


// 查询会审单
const getHuiShenForm = (contractId) => {
    contractApi.getCacheCheckupInfo({ contractId: contractId }).then((res) => {
        for (let key in res.data) {
            form[key] = res.data[key];
        }
    });
};


/**
 * 预览合同
 */
const previewContract = () => {
    if ((form.file && form.file.fileUrlKey && form.file.fileUrlKey !== '') || (form.file && form.file.fileUrlKey)) {
        let fileUrlKey = form.file.fileUrlKey.replaceAll("/", "@")
        let types = form.file.fileUrlKey.split('.');
        if (types[types.length - 1] === 'docx') {
            window.open(`/document/docx/${fileUrlKey}`);
        }
        if (types[types.length - 1] === 'pdf') {
            window.open(`/document/pdf/${fileUrlKey}`);
        }
    }
}

/**
 * 下载
 */
const onDownload = (item) => {
    let types = ['jpeg', 'png', 'gif', 'bmp', 'jpg']
    if (types.includes(item.fileName.split('.')[1])) { // 图片
        downloadImage(item.fileAddress, item.fileName);
    }
    if (!types.includes(item.fileName.split('.')[1])) { // 非图片
        downloadFile(item.fileAddress, item.fileName);
    }
}

onMounted(() => {
    contractId.value = localGet("contractId");
    getHuiShenForm(contractId.value);
});
</script>

<style lang="scss" scoped>
.fileVoList {
    .fileItem {
        .fileItem-font {
            color: #ff7b56;
            cursor: pointer;
        }
    }
}


.container {
    width: 100%;
    height: auto !important;

    .card-box {
        width: 100%;

        .input-width {
            width: 548px;
        }

        .el-form-item-width {
            width: 100%;
        }
    }

    .button-wrapper {
        width: 100%;
    }
}
</style>
